import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , InputNumber, Input, DatePicker, Select, Row, Col, Table, Tag, Drawer } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import SumMoney from '../../../components/SumOfMoney';
import EyeCard from '../../../components/EyeCard';
import RemoveMoney from '../../../components/RemoveMoney';
import Supplement from '../../../components/Supplement';
import Postpone from '../../../components/Postpone';
import Record from '../../../components/Record';
import { orderService } from '../../../service/order';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Column } = Table;

class RollOver extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      selectedRowKeys: [],
      visible: false,
      childrenDrawer: false,
      supplementDrawer: false,
      postponeDrawer: false,
      recordDrawer: false
    };
  }

  newData = [];
  pagination = {
    total: this.newData.length,
    className: 'pagination-position',
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => {
      return `共 ${total} 条`;
    }
  };

  async getData () {
    const res = await orderService.order_list()
    // this.data = res.data.rows;
    console.log(res.data.rows)
    res.data.rows.forEach((item) => {
      if (item.ecnt>0) {
        this.newData.push({
          key: item.id,
          name: item.name,
          phone: item.tel,
          loanCount: item.nums,
          loanMoney: item.money,
          payAmount:'-',
          newLoanDate: item.ectime ? item.ectime : '-',
          newRepaymentDate: item.eouttime ? item.eouttime : '-',
          poundage: item.eamoney ? item.eamoney : '-',
          charge: item.esmoney ? item.esmoney : '-',
          OverdueDays:'-',
          CollectionStatus: item.pstate === 0 ? ['未催收'] : [''],
          Collectter: item.puid ? item.puid : '-',
          CollectionRepayment: item.pmoney,
          auditor:'于宇',
          MOcommissioner:'-',
          cz:['销账', '补扣']
        })
      }
    })
    this.setState({
      data: this.newData,
    });
  }
  
  initData = () => {
    this.newData = [];
  }

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  showChildrenDrawer = () => {
    this.setState({
      childrenDrawer: true,
    });
  };

  showSupplementDrawer = () => {
    this.setState({
      supplementDrawer: true,
    });
  };

  showPostponeDrawer = () => {
    this.setState({
      postponeDrawer: true,
    });
  };

  showRecordDrawer = () => {
    this.setState({
      recordDrawer: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
      childrenDrawer: false,
      supplementDrawer: false,
      postponeDrawer: false,
      recordDrawer: false
    });
  };

  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }

	handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  componentDidMount() {
    this.getData()
  }

  componentWillUnmount() {
    this.initData()
  }

	render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">展期订单</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" onClick={this.handleSearch}>搜索</Button>
              </div>
              <div className="btn">
                <Tag color="blue" key={1}>批量加MO</Tag>
                <Tag color="orange" key={2}>批量改审核</Tag>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: 'Please input your phone!' }],
                    })(
                      <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('borrowStatus', {
                      rules: [{ required: true, message: 'Please input your borrowStatus!' }],
                    })(
                      <Select placeholder="借款状态" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
                        <Select.Option value="waitMachine">待放款</Select.Option>
                        <Select.Option value="machineQuerying">放款中</Select.Option>
                        <Select.Option value="waitPeople">放款失败</Select.Option>
                        <Select.Option value="peopleQuerying">待还款</Select.Option>
                        <Select.Option value="queried">已还款</Select.Option>
                      </Select>
                    )}                   
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('minBorrow', {
                      rules: [{ required: true, message: 'Please input your minBorrow!' }],
                    })(
                      <InputNumber placeholder="最小借款次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                    )}               
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('maxBorrow', {
                      rules: [{ required: true, message: 'Please input your maxBorrow!' }],
                    })(
                      <InputNumber placeholder="最大借款次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                    )}                
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('minPostpone', {
                      rules: [{ required: true, message: 'Please input your minPostpone!' }],
                    })(
                      <InputNumber placeholder="最小展期次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={2}>
                  <FormItem>
                    {getFieldDecorator('maxPostpone', {
                      rules: [{ required: true, message: 'Please input your maxPostpone!' }],
                    })(
                      <InputNumber placeholder="最大展期次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '125px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('range-picker', rangeConfig)(
                      <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                </Row>
                <Row>
                  <Col span={4}>
                    <FormItem>
                      {getFieldDecorator('sq-picker', rangeConfig)(
                        <RangePicker style={{ color: 'rgba(0,0,0,.25)', width: '260px' }} />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={3}>
                    <FormItem>
                      {getFieldDecorator('minDays', {
                        rules: [{ required: true, message: 'Please input your minDays!' }],
                      })(
                        <InputNumber placeholder="最小逾期天数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '195px' }} />
                      )}                   
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <FormItem>
                      {getFieldDecorator('maxDays', {
                        rules: [{ required: true, message: 'Please input your maxDays!' }],
                      })(
                        <InputNumber placeholder="最大逾期天数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '125px' }} />
                      )}                    
                    </FormItem>
                  </Col>
                  <Col span={3}>
                    <FormItem>
                      {getFieldDecorator('auditor', {
                        rules: [{ required: true, message: 'Please input your auditor!' }],
                      })(
                        <Select placeholder="审核专员" style={{ color: 'rgba(0,0,0,.25)', width: '203px' }}>
                          <Select.Option value="lq">李强</Select.Option>
                          <Select.Option value="wm">王梅</Select.Option>
                        </Select>
                      )}                    
                    </FormItem>
                  </Col>
                  <Col span={3}>
                    <FormItem>
                      {getFieldDecorator('MOcommissioner', {
                        rules: [{ required: true, message: 'Please input your MOcommissioner!' }],
                      })(
                        <Select placeholder="MO专员" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
                          <Select.Option value="yh">尹浩</Select.Option>
                          <Select.Option value="xj">徐静</Select.Option>
                        </Select>
                      )}                
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <FormItem>
                      {getFieldDecorator('pressStatus', {
                        rules: [{ required: true, message: 'Please input your pressStatus!' }],
                      })(
                        <Select placeholder="催收状态" style={{ color: 'rgba(0,0,0,.25)', width: '125px' }}>
                          <Select.Option value="collection">交催收</Select.Option>
                          <Select.Option value="inCollection">催收中</Select.Option>
                          <Select.Option value="collected">催收完成</Select.Option>
                        </Select>
                      )}                    
                    </FormItem>
                  </Col>
                  <Col span={3}>
                    <FormItem>
                      {getFieldDecorator('presser', {
                        rules: [{ required: true, message: 'Please input your presser!' }],
                      })(
                        <Select placeholder="催收人" style={{ color: 'rgba(0,0,0,.25)', width: '193px' }}>
                          <Select.Option value="yh">尹浩</Select.Option>
                          <Select.Option value="xj">徐静</Select.Option>
                        </Select>
                      )}                   
                    </FormItem>
                  </Col>
                </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ this.pagination } rowSelection={rowSelection} bordered dataSource={this.state.data}>
              <Column title='姓名' align='center' dataIndex='name' width='80' />
              <Column title='手机号' align='center' dataIndex='phone' width='130' />
              <Column title='借款次数' align='center' dataIndex='loanCount' width='100' />
              <Column title='借款额' align='center' dataIndex='loanMoney' width='80' />
              <Column title='还款额' align='center' dataIndex='payAmount' width='80' />
              <Column title='新借款日' align='center' dataIndex='newLoanDate' width='120' />
              <Column title='新还款日' align='center' dataIndex='newRepaymentDate' width='120' />
              <Column title='展期手续费' align='center' dataIndex='poundage' width='120' />
              <Column title='展期服务费' align='center' dataIndex='charge' width='120' />
              <Column title='逾期天数' align='center' dataIndex='OverdueDays' width='100' />
              <Column title='催收状态' align='center' dataIndex='CollectionStatus' width='100' 
                render={CollectionStatus => (
                  <span>
                    {CollectionStatus.map(CollectionStatus => <Tag color="green" key={CollectionStatus}>{CollectionStatus}</Tag>)}
                  </span>
                )} />
              <Column title='催收人' align='center' dataIndex='Collectter' width='100' />
              <Column title='催收还款' align='center' dataIndex='CollectionRepayment' width='100' />
              <Column title='审核专员' align='center' dataIndex='auditor' width='100' />
              <Column title='MO专员' align='center' dataIndex='MOcommissioner' width='100' />
              <Column title='操作' align='center' dataIndex='cz' width='400' 
                render={cz => (
                  <span>
                  <Tag color="blue" key={cz} onClick={this.showDrawer}><Icon type='eye' /></Tag>
                  <Tag color="orange" key="xz" onClick={this.showChildrenDrawer}>销账</Tag>
                  <Tag color="orange" key="bk" onClick={this.showSupplementDrawer}>补扣</Tag>
                  <Tag color="blue" key="zq" onClick={this.showPostponeDrawer}>展期</Tag>
                  <Tag color="blue" key="jl" onClick={this.showRecordDrawer}>记录</Tag>
                  <Tag color="green" key="zl">资料</Tag>
                  </span>
                )} />
            </Table>
          </div>
          <SumMoney />
          <Drawer
          title="订单详情"
          placement="right"
          width="75%"
          onClose={this.onClose}
          visible={this.state.visible}
          >
            <EyeCard />
          </Drawer> 
          <Drawer
            title="销账"
            placement="right"
            width="30%"
            onClose={this.onClose}
            visible={this.state.childrenDrawer}
          >
            <RemoveMoney />
          </Drawer>
          <Drawer
            title="补扣"
            placement="right"
            width="30%"
            onClose={this.onClose}
            visible={this.state.supplementDrawer}
          >
            <Supplement />
          </Drawer>
          <Drawer
            title="展期"
            placement="right"
            width="40%"
            onClose={this.onClose}
            visible={this.state.postponeDrawer}
          >
            <Postpone />
          </Drawer>
          <Drawer
            title="记录"
            placement="right"
            width="50%"
            onClose={this.onClose}
            visible={this.state.recordDrawer}
          >
            <Record />
          </Drawer>
        </div> 
      </LocaleProvider>  
		);
	}
}

const renewalForm = Form.create()(RollOver);

export default renewalForm;